<template>
  <div class="configu">
    <Left-menus active="5-1" openeds="5"></Left-menus>
    <div class="configu-main">
      <div class="head my-btn">
        <div class="search">
          <el-input placeholder="输入模版名称搜索" v-model="tempName"></el-input>
          <i class="el-icon-search" @click="submit"></i>
        </div>
        <el-button @click="addDet(0)">新增模板</el-button>
      </div>
      <div class="list">
        <h2>溯源模版管理</h2>
        <div class="content">
          <el-table :data="tableData" style="width: 100%" :loading="loading">
            <el-table-column prop="name" label="模版名称"></el-table-column>
            <el-table-column label="环节数量">
              <template slot-scope="scope">{{JSON.parse(scope.row.content).list.length}}</template>
            </el-table-column>
            <el-table-column prop="gmtCreate" label="创建时间">
              <template slot-scope="scope">{{scope.row.gmtCreate | dateformat}}</template>
            </el-table-column>
            <el-table-column prop="name" label="说明"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div class="operat">
                  <el-button type="text" style="color:#76d4ce;" @click="addDet(scope.row)">编辑</el-button>
                  <el-popconfirm
                    confirmButtonText="删除"
                    cancelButtonText="取消"
                    title="确认删除吗？"
                    hideIcon
                    cancelButtonType="default"
                    @onConfirm="deletion(scope.row.id)"
                    placement="top"
                  >
                    <el-button type="text" style="color:#76d4ce;marginLeft:10px" slot="reference">删除</el-button>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="paging"
            align="right"
            @current-change="handleCurrentChange"
            :current-page.sync="curPage"
            hide-on-single-page
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="count"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="添加溯源模版" :visible.sync="dialogVisible" width="525px" class="company">
      <span>
        <h3>
          <b>*</b> 模版名称
        </h3>
        <div class="company-main">
          <p>
            <b>*</b>模版名称：
          </p>
          <el-input v-model="configuForm.name" placeholder="请输入模版名称"></el-input>
        </div>
        <div class="company-main">
          <p>模版说明：</p>
          <el-input v-model="configuForm.description" placeholder="请输入模版说明"></el-input>
        </div>
        <h3>溯源环节</h3>
        <div v-for="(item,index) in bageLink" :key="index">
          <div class="company-main">
            <p>环节名称：</p>
            <el-input v-model="item.linkTitle" placeholder="请输入环节名称"></el-input>
            <el-button
              type="text"
              style="color:#00baad;margin-left:5px"
              @click="deletBage(index)"
            >删除</el-button>
          </div>
          <div class="company-main" v-for="(t,i) in item.data" :key="i">
            <p>标题：</p>
            <el-input v-model="t.title" placeholder="请输入标题"></el-input>
            <el-button
              type="text"
              style="color:#00baad;margin-left:5px"
              @click="deletBageLink(index,i)"
            >删除</el-button>
          </div>
          <div class="addNew addNew1" @click="addTitle(index)">
            <i class="el-icon-plus"></i> 添加新的标题
          </div>
        </div>
        <div class="addNew" @click="addNew">
          <i class="el-icon-plus"></i> 添加新的溯源环节
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTemplate" :loading="loading1">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import LeftMenus from "@/views/components/TraceaLeftmenus";
import { mapState } from "vuex";
export default {
  data() {
    return {
      tempName: "",
      loading: false,
      loading1: false,
      curPage: 1,
      pageSize: 10,
      count: null,
      dialogVisible: false,
      addDetState: null,
      row: {},
      companyForm: {},
      configuForm: {},
      tableData: [],
      bageLink: [
        {
          linkTitle: "",
          data: [
            {
              title: "",
            },
          ],
        },
      ],
    };
  },
  created() {
    this.getTraceLinkTemplatePageList();
  },
  methods: {
    async getTraceLinkTemplatePageList() {
      // 获取列表
      this.loading = true;
      let obj = {
        name:this.tempName,
        pageNum: this.curPage,
        pageSize: 10,
      };
      const res = await this.axios.getTraceLinkTemplatePageList(obj);
      this.loading = false;
      this.tableData = res.data.data.list;
      this.count = res.data.data.totalCount;
    },
    async addTraceTemplate(obj) {
      // 新增模板
      const res = await this.axios.addTraceTemplate(obj);
      if (res.data.code == 200) {
        this.$message({
          message: "添加成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.dialogVisible = false;
            this.getTraceTemplatePageList();
            this.loading1 = false;
          },
        });
      } else {
        if (res.data.message == "数据重复") {
          this.$message.warning("模板名称已存在");
        } else {
          this.$message.warning(res.data.message);
        }
        this.loading1 = false;
      }
    },
    async updateTraceTemplate(obj) {
      // 更新模板
      const res = await this.axios.updateTraceTemplate(obj);
      if (res.data.code == 200) {
        this.$message({
          message: "更新成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.dialogVisible = false;
            this.getTraceTemplatePageList();
            this.loading1 = false;
          },
        });
      } else {
        this.$message.warning(res.data.message);
        this.loading1 = false;
      }
    },
    async deletion(id) {
      // 删除模板
      const res = await this.axios.deleteTraceTemplate(id);
      if (res.data.code == 200) {
        this.$message({
          message: "删除成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.getTraceTemplatePageList();
          },
        });
      } else {
        this.$message.warning(res.data.message);
      }
    },
    submit(){
      // 搜索
      this.curPage = 1
      this.getTraceLinkTemplatePageList()
    },
    handleCurrentChange(val) {
      // 分页
      this.curPage = val;
      this.getTraceTemplatePageList();
    },
    addDet(row) {
      // 新增-修改模板
      this.bageLink = [
        {
          linkTitle: "",
          data: [
            {
              title: "",
            },
          ],
        },
      ];
      this.configuForm = {};
      this.row = row;
      if (row == 0) {
        this.dialogVisible = true;
      } else {
        this.dialogVisible = true;
        this.configuForm = {
          name: row.name,
          description: row.description,
        };
        this.bageLink = JSON.parse(row.content).list;
      }
    },
    addTitle(index) {
      this.bageLink[index].data.push({ title: "" });
    },
    addNew() {
      this.bageLink.push({ linkTitle: "", data: [{ title: "" }] });
    },
    deletBage(index) {
      this.bageLink.splice(index, 1);
    },
    deletBageLink(index, i) {
      this.bageLink[index].data.splice(i, 1);
    },
    addTemplate() {
      // 确认新增-修改
      if (!this.configuForm.name) {
        return this.$message.warning("请输入模板名称");
      }
      this.loading1 = true;
      this.bageLink.map((el, index) => {
        el.sort = index;
        if (el.data.length) {
          el.data.map((el1, index1) => {
            el1.sort = index1;
          });
        } else {
          delete el.data;
        }
      });
      let obj = {
        content: JSON.stringify({ list: this.bageLink }),
        contentType: 2,
        description: this.configuForm.description,
        name: this.configuForm.name,
        templateType: 2,
        uid: this.print.uid,
        openStatus: 1,
      };
      if (this.row == 0) {
        this.addTraceTemplate(obj);
      } else {
        obj.id = this.row.id;
        this.updateTraceTemplate(obj);
      }
    },
  },
  components: {
    LeftMenus,
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
    }),
  },
};
</script>

<style lang="scss" scoped>
.configu {
  display: flex;
  justify-content: center;
  .configu-main {
    width: 960px;
    padding: 20px;
    padding-top: 0;
    .head {
      display: flex;
      justify-content: space-between;
      .search {
        cursor: pointer;
        display: flex;
        align-items: center;
        i {
          width: 34px;
          height: 34px;
          flex-shrink: 0;
          display: block;
          border-radius: 50%;
          background-color: #5bc6bb;
          line-height: 34px;
          text-align: center;
          color: #fff;
          margin-left: 10px;
        }
      }
      /deep/ .el-input__inner {
        width: 300px;
        height: 34px;
        background: rgba(255, 255, 255, 1);
        opacity: 1;
        border-radius: 17px;
      }
      /deep/ .el-input__inner:focus {
        border-color: #ddd;
      }
    }
    .list {
      margin-top: 15px;
      background-color: #fff;
      padding: 10px 15px;
      min-height: calc(100vh - 280px);
      h2 {
        padding-left: 15px;
        border-left: 4px solid #5bc6bb;
      }
      .content {
        margin-top: 25px;
        .paging {
          margin-top: 50px;
        }
      }
    }
  }
  .company {
    h3 {
      color: #00baad;
      margin-top: 15px;
    }
    b {
      color: red;
      font-weight: normal;
    }
    .company-main {
      display: flex;
      padding: 5px 20px;
      align-items: center;
      p {
        min-width: 80px;
        text-align: right;
      }
    }
    .addNew {
      text-align: center;
      border: 1px dotted rgba(187, 187, 187, 1);
      line-height: 30px;
      width: 80%;
      margin: 25px auto 0;
      -moz-user-select: none;
      -khtml-user-select: none;
      user-select: none;
      cursor: pointer;
      i {
        font-weight: bold;
        font-size: 16px;
      }
    }
    .addNew:active {
      border: 1px solid rgba(187, 187, 187, 1);
    }
    .addNew1 {
      width: 50%;
      margin: 0 0 25px 47px;
    }
    /deep/ .el-dialog__body {
      padding-top: 0;
    }
    /deep/ .el-input__inner {
      line-height: 30px;
      height: 30px;
    }
    /deep/ .el-dialog__footer {
      text-align: center;
      .el-button--primary {
        background-color: #76d4ce;
        border-color: #76d4ce;
        color: #fff;
      }
      .el-button {
        padding: 10px 30px;
        width: 150px;
      }
      .el-button--default:focus,
      .el-button--default:hover {
        color: #76d4ce;
        border-color: #76d4ce;
        background-color: #ecf5ff;
      }
    }
  }
}
</style>